<template>
	<view>
		<view class="equip-mess">
			<view class="equip-items">
				<view class="equip-items-name">SN号</view>
				<view class="equip-items-value">{{ list.code }}</view>
			</view>
			<view class="equip-items">
				<view class="equip-items-name">设备码</view>
				<view class="equip-items-value">{{ list.alias }}</view>
			</view>
			<view class="equip-items">
				<view class="equip-items-name">设备名称</view>
				<view class="equip-items-value">{{ list.name }}</view>
			</view>
			<view class="equip-items">
				<view class="equip-items-name">柜号</view>
				<view class="equip-items-value">{{ list.container }} 号</view>
			</view>
			<view class="equip-items">
				<view class="equip-items-name">位置</view>
				<view class="equip-items-value">{{ list.address }}</view>
			</view>
			<view class="equip-items">
				<view class="equip-items-name">状态</view>
				<view class="equip-items-value">{{ eqStatus(list.status) }}</view>
			</view>
		</view>
		<view class="recycl-content">
			<view class="bar-title">
				<view class="bar-name" :class="type === items.value?'active':'' " v-for="(items, index) in barTitle" :key="index"
				 @click="changeBar(items, index)">
					{{ items.name }}
				</view>
			</view>
			<view class="clear-button" @click="clearAll()">清空</view>
		</view>
		<view class="head-title">
			<view class="title-name" v-for="(items, index) in headList" :key="index">
				{{ items.name }}
			</view>
			<view class="title-name">
				{{ type === 1?"补货数": "回收数" }}
			</view>
		</view>
		<view class="track-content">
			<view class="track-items" v-for="(items, index) in trackList" :key="index">
				<view class="items-content">{{ items.track_id }}</view>
				<view class="items-content">{{ items.goods_name }}</view>
				<view class="items-content">{{ items.goods_stock }}</view>
				<view class="items-content">
					<input v-model="items.number" class="track-num" type="number" @change="changeNum(items)" />
				</view>
			</view>
		</view>
		<view class="track-submit" @click="submitData()">
			<template v-if="submitDone">
				提交
			</template>
			<template v-else>
				{{ type === 1?'开门补货':'开门回收'}}
			</template>
		</view>
	</view>
</template>

<script>
	import validCode from '@/components/p-validecode/validcode.vue'
	import titleBar from '@/components/title-bar/index.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';

	export default {
		components: {
			titleBar,
			uniPopup,
			validCode
		},
		data() {
			return {
				code: "",
				track_id: "",
				barTitle: [{
					name: "补货",
					value: 1
				}, {
					name: "回收",
					value: 2
				}],
				list: [],
				type: 1,
				submitDone: false,
				headList: [{
					name: '货道编号'
				}, {
					name: '商品名称'
				}, {
					name: '商品存量'
				}],
				trackList: []
			}
		},
		created() {
			this.code = this.getUrlKey('code');
			this.track_id = this.getUrlKey('track_id');
			this.getList();
			this.getData();
		},
		methods: {
			getList() {
				const path = {
					app: "wxadmin",
					api: "api_wxadmin_dispatching_getEquipmentInfo",
					version: "1.0",
					type: 2,
					data: {
						code: this.code || "",
						track_id: this.track_id || ""
					}
				}
				this.sendSock(path)
			},
			changeBar(item, index) {
				this.type = index + 1;
				this.getData();
			},
			getData() {
				const path = {
					app: "wxadmin",
					api: "api_wxadmin_dispatching_replenish",
					version: "1.0",
					type: 2,
					data: {
						code: this.code || "",
						track_id: this.track_id || "",
						type: this.type,
						returnType: this.type
					}
				}
				this.sendSock(path)
			},
			changeNum(items) {
				if (Number(items.number) > parseInt(items.track_capacity)) {
					uni.showToast({
						icon: "none",
						title: "超过最大值",
						duration: 2000
					});
				}
			},
			clearAll() {
				const path = {
					"app": "wxadmin",
					"api": "api_wxadmin_dispatching_zero",
					"version": "1.0",
					"type": 2,
					"data": {
						code: this.code || "",
						track_id: this.track_id || "",
					}
				}
				this.sendSock(path)
			},
			submitData() {
				if (!this.submitDone) {
					const path = {
						app: "wxadmin",
						api: "api_wxadmin_dispatching_openDoor",
						version: "1.0",
						type: 2,
						data: {
							code: this.code || "",
							track_id: this.track_id || "",
							type: this.type
						}
					}
					this.sendSock(path)
				} else {
					const data = [];
					const list = this.trackList;
					list.forEach(element => {
						data.push({
							track_id: element.track_id,
							number: element.number
						})
					})

					const path = {
						app: "user",
						api: "api_wxadmin_dispatching_supply",
						version: "1.0",
						type: 2,
						data: {
							code: this.code || "",
							type: this.type,
							list: data,
							returnType: this.type
						}
					}
					this.sendSock(path)
				}
			},
			sendSock(path) {
				if (this.$store.state.socketOpen) {
					uni.sendSocketMessage({
						data: JSON.stringify(path)
					});
				} else {
					this.$store.state.socketMsgQueue.push(JSON.stringify(path));
				}
				const _this = this
				uni.onSocketMessage(function(res) {
					_this.getSock(res.data)
				});
			},
			getSock(res) {
				if (res !== '{"type":"ping"}') {
					const resj = JSON.parse(res);
					if (resj.code === -1) {
						uni.showToast({
							icon: "none",
							title: resj.message,
							duration: 2000
						});
					} else if (resj.code === 403) {
						let key = this.getUrlKey('key')
						this.getMess(key);
					} else {
						if (resj.api === "api_wxadmin_admin_login") {
							this.$store.commit('login', resj.data);
							this.temporary()
						} else if (resj.api === "api_wxadmin_admin_keepLogin") {
							this.temporary()
						} else if (resj.api === "api_wxadmin_dispatching_getEquipmentInfo") {
							this.list = resj.data
						} else if (resj.api === "api_wxadmin_dispatching_replenish" && resj.type === 1) {
							const data = resj.data;
							data.forEach(element => {
								element.number = 0
							})
							this.trackList = data;

						} else if (resj.api === "api_wxadmin_dispatching_replenish" && resj.type === 2) {
							const data = resj.data;
							data.forEach(element => {
								element.number = element.goods_stock
							})
							this.trackList = data;
						} else if (resj.api === "api_wxadmin_dispatching_openDoor") {
							uni.showToast({
								icon: "none",
								title: "开门成功",
								duration: 1000
							});
							this.submitDone = true;
						} else if (resj.api === "api_wxadmin_dispatching_supply" && resj.type === 1) {
							uni.showToast({
								icon: "none",
								title: "补货成功",
								duration: 1000
							});
							this.submitDone = false;
						} else if (resj.api === "api_wxadmin_dispatching_supply" && resj.type === 2) {
							uni.showToast({
								icon: "none",
								title: "回收成功",
								duration: 1000
							});
							this.submitDone = false;
						} else if (resj.api === "api_wxadmin_dispatching_zero") {
							uni.showToast({
								icon: "none",
								title: "清空成功",
								duration: 1000
							});
						}
					}
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}

	.equip-mess {
		margin-top: 20rpx;
		background-color: #FFFFFF;
		padding: 0 30rpx;
	}

	.equip-items,
	.recycl-content,
	.bar-title,
	.head-title,
	.track-items,
	.track-submit {
		display: flex;
		align-items: center;
	}

	.equip-items {
		height: 100rpx;
		justify-content: space-between;

	}

	.equip-mess .equip-items:not(:last-child) {
		border-bottom: 1rpx solid #E4E4E4;
	}

	.equip-items-name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 1;
	}

	.equip-items-value {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		line-height: 1;
	}

	.recycl-content {
		margin-top: 20rpx;
		height: 120rpx;
		padding: 0 30rpx;
		background-color: #FFFFFF;
		justify-content: space-between;
	}

	.bar-name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(153, 153, 153, 1);
		line-height: 1;
		position: relative;
	}

	.bar-title .bar-name:not(:first-child) {
		margin-left: 40rpx;
	}

	.bar-title .active {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		line-height: 1;
	}

	.bar-title .active:after {
		content: "";
		display: block;
		width: 40rpx;
		height: 8rpx;
		background: #FFC324;
		border-radius: 4rpx;
		;
		position: absolute;
		left: calc(50% - 20rpx);
		bottom: -20rpx
	}

	.clear-button {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(38, 141, 255, 1);
		line-height: 1;
	}

	.head-title {
		height: 82rpx;
		justify-content: center;
		padding: 0 30rpx;

	}

	.head-title .title-name:first-child {
		width: 140rpx;
	}

	.head-title .title-name {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		line-height: 1
	}

	.head-title .title-name:not(:first-child) {
		flex: 1;
		text-align: center;
	}

	.track-content {
		background-color: #FFFFFF;
	}

	.track-items {
		height: 92rpx;
		padding: 0 30rpx;
	}

	.track-content .track-items:not(:last-child) {
		border-bottom: 1rpx solid #E0E0E0;
	}

	.track-items .items-content:first-child {
		width: 140rpx;
	}

	.track-items .items-content {

		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 30rpx;
	}

	.track-items .items-content:not(:first-child) {
		flex: 1;
		text-align: center;
	}

	.track-num {
		width: 160rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(153, 153, 153, 1);
		border-radius: 6rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(178, 178, 178, 1);
		line-height: 1;
	}

	.track-submit {
		margin: 60rpx auto;
		justify-content: center;
		width: 690rpx;
		height: 98rpx;
		background: linear-gradient(0deg, rgba(255, 195, 36, 1), rgba(255, 211, 94, 1));
		box-shadow: 0rpx 5rpx 5rpx 0rpx rgba(255, 195, 36, 0.2);
		border-radius: 49rpx;
	}
</style>
